//组件的类写法---官方不推荐

// 1.思想保持一致
// 2.类组件依赖于this
import {Component} from "react";
class Counter extends Component{
    state={
        count:2,
        message:'我是父组件'
    }
    setCount = ()=>{
        this.setState({
            count:this.state.count+1
        })
    }
    getSonMsg = (sonMsg)=>{
        console.log(sonMsg)
    }
    render() {
        return (
            <>
                {/*控制子组件是否显示*/}
                {this.state.count===2?<Son msg={this.state.message} onGetSonMsg={this.getSonMsg}></Son>:''}
                <button onClick={this.setCount}>{this.state.count}</button>

            </>
        )
    }
}

export default Counter

class Son extends Component{
    // 组件渲染完毕执行一次 发送网络请求
    // componentDidMount() {
    //     console.log("componentDidMount-组件渲染完毕了，请求发送起来")
    //     this.timer = setInterval(()=>{
    //         console.log('定时器运行中==========')
    //     },800)
    // }
    // // 组件卸载时自动执行 副作用清理的工作 清除定时器 清除事件绑定
    // componentWillUnmount() {
    //     console.log("componentWillMount-组件卸载执行")
    //     clearInterval(this.timer)
    // }

    render(){
        return (
            <div>
                <h2>我是儿子</h2>
                <h2>我是props传递的值-{this.props.msg}</h2>
                <button onClick={()=>this.props.onGetSonMsg('我是子组件里的数据')}>调用父组件的传的方法</button>
            </div>
        )
    }
}
